<!-- sku弹窗 -->
<template>
	<!--<van-overlay :show="show" @click="show = false">-->
	<van-action-sheet v-model="show" title="" @click-overlay="cancelFN">
		<div class="sku_wrap">
			<div class="sku_content" @click.stop>
				<div class="s_head">
					<div class="h_left">
						<div class="pic"><img src="../../assets/images/public/t2.png" /></div>
					</div>
					<div class="h_right">
						<p class="p1">￥564646</p>
						<p class="p2">￥55</p>
					</div>
				</div>
				<div class="specification_box">
					<dl v-for="(x, indexX) in skuSpecList">
						<dt><span>{{x.specName}}</span></dt>
						<dd>
							<div class="box" :class="{action: x.selected_specid==y.specValueId, forbid_style: y.forbid_operation}" v-for="(y, indexY) in x.specValueList" @click="choiceSpecification(x, indexX, y, indexY)">
								<span>{{y.specValueName}}</span>
							</div>
						</dd>
					</dl>
				</div>
				<div class="buy_num">
					<span>购买数量</span>
					<span>x1</span>
				</div>
				<footer>
					<div class="f_content">
						<div class="icon" @click="toPage('kefu')">
							<img src="../../assets/images/prodetails_btn_contact_normal@2x.png" alt="" />
						</div>
						<div class="icon" @click="toPage('cart')">
							<img src="../../assets/images/prodetails_btn_cart_normal@2x.png" alt="" />
						</div>
						<div class="btn" @click="addCart"><span>加入购物车</span></div>
					</div>
				</footer>
			</div>
		</div>
	</van-action-sheet>
</template>

<script>
	import { Toast, ActionSheet, Overlay } from 'vant';

	export default {
		data() {
			return {
				show: true,

				defaultGoods: {}, //
				nowGoods: {}, //当前选中的规格商品
				goodsKeyValue: {},
				skuSpecList: [], //sku规格列表
			};
		},
		watch: {},
		props: {
			//商品详情信息
			goodsInformation: {
				type: Object,
				default: {}
			},
		},
		computed: {},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.skuSpecList = this.goodsInformation.goodsDetail.specJson || [];
				console.log(this.skuSpecList)
			},
			//选择规格
			choiceSpecification(x, indexX, y, indexY) {
				if(y.forbid_operation) return; //置灰的按钮不可点击

				if(x.selected_specid == y.specValueId) {
					x.selected_specid = null;
				} else {
					x.selected_specid = y.specValueId;
				}
			},
			cancelFN() {
				this.$emit('showSkuDialog', 0);
			},
			toPage(item) {
				if(item == 'cart') {
					this.$router.push({
						name: 'cart'
					})
				}
			},
			addCart() {
				Toast({
					duration: 800,
					message: "添加成功",
					forbidClick: true,
				});
				this.$emit('showSkuDialog', 0);
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.sku_wrap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-end;
		.sku_content {
			width: 100%;
			background: #fff;
		}
		.s_head {
			padding: rem(20);
			display: flex;
			justify-content: space-between;
			.h_left {
				.pic {
					width: rem(160);
					height: rem(160);
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					box-sizing: border-box;
					border: rem(2) solid #eee;
					img {
						width: 100%;
					}
				}
			}
			.h_right {
				padding: 0 0 0 rem(20);
				flex: 1;
				p {
					font-size: rem(26);
					color: #999;
				}
				.p1 {
					font-size: rem(32);
					color: $fc;
				}
			}
		}
		.specification_box {
			max-height: rem(600);
			overflow-y: scroll;
			dl {
				padding: rem(20);
				border-bottom: rem(1) solid #eee;
				dt {
					height: rem(60);
					display: flex;
					align-items: center;
					span {
						font-size: rem(28);
						color: $fc;
						font-weight: bold;
					}
				}
				dd {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					.box {
						height: rem(50);
						padding: 0 rem(14);
						margin: 0 rem(10) rem(10) 0;
						background: #eee;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: rem(50);
						span {
							font-size: rem(24);
							color: $fc;
							white-space: nowrap;
						}
					}
					.action {
						background:  $theme-color;
						span {
							color: #fff;
						}
					}
					.forbid_style {
						background: #f6f6f6;
						span {
							color: #ccc;
						}
					}
				}
			}
		}
	}
	
	.buy_num {
		height: rem(100);
		padding: 0 rem(20);
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: rem(1) solid #eee;
		span {
			font-size: rem(28);
			color: $fc;
		}
	}
	
	footer {
		width: 100%;
		.f_content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: rem(10);
		}
		.icon {
			margin: 0 rem(20);
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				width: rem(40);
			}
		}
		.btn {
			height: rem(80);
			flex: 1;
			background:  $theme-color;
			width: rem(200);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: rem(60);
			span {
				font-size: rem(28);
				color: #fff;
			}
		}
	}
</style>